<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :title="isUpdate ? '修改内部计划' : '添加内部计划'"
    :visible="visible"
    class="ele-dialog-layout"
    custom-class="ele-dialog-form"
    width="660px"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item prop="nickname">
            <span slot="label">微信昵称:</span>
            <el-input
              v-model="form.nickname"
              :maxlength="32"
              clearable
              placeholder="请输入微信昵称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="wechat">
            <span slot="label">微信号:</span>
            <el-input
              v-model="form.wechat"
              :maxlength="32"
              clearable
              placeholder="请输入微信号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item>
            <span slot="label">使用员工:</span>
            <el-input
              v-model="form.name"
              :maxlength="20"
              clearable
              placeholder="请输入使用员工"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <span slot="label">展示手机:</span>
            <el-input
              v-model="form.phone"
              :maxlength="20"
              clearable
              placeholder="请输入展示手机号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="展示域名:">
        <el-select
          v-model="form.domain"
          filterable
          placeholder="请选择展示域名"
          style="width: 536px"
          multiple
          collapse-tags
        >
          <el-option
            v-for="item in domainList"
            :key="item.DomainUrl"
            :label="item.SiteName"
            :value="item.DomainUrl"
          >
            <span style="float: left">{{ item.SiteName }}</span>
            <span
              style="
                float: right;
                margin-right: 20px;
                color: #8492a6;
                font-size: 13px;
              "
              >{{ item.DomainUrl }}</span
            >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="展示时段">
        <el-col :span="4">
          <el-input v-model="form.startHour" clearable placeholder="12" />
        </el-col>
        <el-col class="line" style="margin-left: 12px" :span="1"> - </el-col>
        <el-col :span="4">
          <el-input v-model="form.endHour" clearable placeholder="16" />
        </el-col>
      </el-form-item>

      <el-form-item label="展示城市:" style="margin-bottom: 10px">
        <el-input
          v-model="form.city"
          :rows="3"
          placeholder="拦截城市请用逗号分开,"
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="性别:" style="margin-bottom: 10px">
        <el-radio-group v-model="form.sex">
          <el-radio :label="0">女</el-radio>
          <el-radio :label="1">男</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="二维码:">
        <el-input
          v-model="form.qrcode"
          clearable
          placeholder="请输入二维码URL地址或上传二维码"
          style="width: 450px"
        />
        <el-upload
          :action="baseURLUpload()"
          :before-upload="beforeUpload"
          :disabled="uploadLoading"
          :headers="headersUpload"
          :on-error="errorUpload"
          :on-progress="progressUpload"
          :on-success="successUpload"
          :show-file-list="false"
          style="position: relative; display: inline-block; margin-left: 10px"
        >
          <el-button
            :disabled="uploadLoading"
            :loading="uploadLoading"
            icon="el-icon-upload"
            size="small"
            style="width: 74px; height: 34px"
            type="primary"
            >{{ uploadText }}
          </el-button>
        </el-upload>

        <div
          style="
            margin-top: 10px;
            border: 1px solid var(--border-color-base);
            width: 48px;
            height: 48px;
          "
        >
          <i
            v-if="!this.form.qrcode"
            class="el-icon-_qrcode"
            style="display: block; font-size: 48px; color: var(--color-primary)"
          ></i>
          <img
            v-else
            :src="this.form.qrcode"
            style="cursor: pointer; display: block; width: 48px; height: 48px"
            @click="viewQrcodeUrl"
          />
        </div>
      </el-form-item>

      <el-form-item label="状态:" style="margin-top: -20px; margin-bottom: 6px">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>

    <div slot="footer" style="margin: 10px">
      <el-button @click="updateVisible(false)">取消 </el-button>
      <el-button :loading="loading" type="primary" @click="save"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import setting from "@/config/setting";

/**
 * 内存单位枚举
 */
export default {
  name: "internalEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  data() {
    return {
      form: Object.assign(
        {},
        {
          qrcode: "",
          status: 1,
          sex: 0,
        },
        this.data
      ),
      //域名列表
      domainList: [
        {
          value: "Beijing",
          label: "北京",
        },
        {
          value: "Shanghai",
          label: "上海",
        },
        {
          value: "Nanjing",
          label: "南京",
        },
        {
          value: "Chengdu",
          label: "成都",
        },
        {
          value: "Shenzhen",
          label: "深圳",
        },
        {
          value: "Guangzhou",
          label: "广州",
        },
      ],
      rules: {
        nickname: [
          { required: true, message: "请输入展示微信昵称", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入微信使用职员", trigger: "blur" },
        ],
        wechat: [
          { required: true, message: "请输入展示微信号", trigger: "blur" },
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 上传标题
      uploadText: "上传",
      // 上传状态
      uploadLoading: false,
      //上传头部
      headersUpload: {
        Authorization: setting.takeToken(),
      },
    };
  },
  watch: {
    data() {
      if (Object.keys(this.data).length > 0) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        for (let i in this.form) {
          this.form[i] = null;
        }
        this.form.sex = 0;
        this.form.status = 1;
        this.isUpdate = false;
      }
    },
  },
  created: function () {
    this.getDomainName();
  },
  methods: {
    getDomainName() {
      this.$http
        .post("/Internal/getDomain")
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            this.domainList = res.data.array;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    baseURLUpload() {
      return process.env.VUE_APP_API_BASE_URL + "/service/upload";
    },

    beforeUpload(file) {
      // 验证文件类型
      const fileType = file.type.toLowerCase();
      if (
        [
          "image/jpeg",
          "image/bmp",
          "image/gif",
          "image/png",
          "image/webp",
          "image/tiff",
        ].indexOf(fileType) === -1
      ) {
        this.$message.error("上传文件只能是图片格式!");
        return false;
      }
      // 验证文件大小
      if (!(file.size / 1024 / 1024 < 1)) {
        this.$message.error("上传文件大小不能超过1MB!");
        return false;
      }
      // 开始上传图片
      this.uploadLoading = true;
      return true;
    },

    errorUpload() {
      this.uploadText = "上传";
      this.uploadLoading = false;
      this.$message.error("上传失败!");
    },

    successUpload(obj) {
      this.uploadText = "上传";
      this.uploadLoading = false;
      if (obj.code === 0) {
        this.form.qrcode = obj.url;
        this.$message({
          message: "上传成功!",
          type: "success",
        });
      } else {
        this.$message.error(obj.msg);
      }
    },

    progressUpload(event) {
      if (event.isTrusted) {
        this.uploadText = parseInt(event.percent) + "%";
      }
    },

    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http
            .post(
              "/Internal/" + (this.isUpdate ? "update" : "create"),
              this.form
            )
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message({ type: "success", message: res.data.msg });
                if (!this.isUpdate) {
                  for (let i in this.form) {
                    this.form[i] = null;
                  }
                  this.form.status = 1;
                }
                this.updateVisible(false);
                this.$emit("done", this.isUpdate);
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },

    updateVisible(value) {
      this.$emit("update:visible", value);
    },

    viewQrcodeUrl() {
      this.$alert(
        '<img src="' +
          this.form.qrcode +
          '" style=" width: 270px; height: 270px;"/>',
        "二维码查看",
        {
          dangerouslyUseHTMLString: true,
          closeOnClickModal: true,
          customClass: "el-message-qr",
          showConfirmButton: false,
        }
      );
    },
  },
};
</script>
<style scoped>
.ele-dialog-layout /deep/ .ele-dialog-form .el-dialog__body {
  margin-left: -26px !important;
}
</style>
